/*
 * @Description:
 * @Autor: fage
 * @Date: 2022-07-07 14:36:09
 * @LastEditors: chenbinfa
 * @LastEditTime: 2022-09-20 10:21:39
 */
import React, { useRef, useState, useEffect } from "react";
import {
	DatePicker,
	Input,
	InputNumber,
	Menu,
	Modal,
	Button,
	Tooltip,
	Dropdown,
	Descriptions,
	Select,
	Space,
	Table,
	message,
	Tabs,
	Popconfirm,
	Checkbox,
	Card,
	Form,
	Collapse,
	Empty
} from "antd";
import { UserOutlined, DownOutlined, DeleteOutlined, SwapRightOutlined, CheckCircleOutlined, CopyOutlined } from "@ant-design/icons";
import _ from "lodash";
import { useNavigate } from "react-router-dom";
import moment from "moment";
import { formatterCurrency, formatterCurrencyStr, formatterSize, formatterSizeFromMB } from "@utils/format";
import copy from "copy-to-clipboard";
import { NavLink, Outlet, useParams } from "react-router-dom";
import { ThTable } from "@/components/ThTable";
import { isMobile } from "@utils";
import SearchBar from "@/components/SearchBar";
import MList from "@/components/mobile/MList";
import Footer from "@/components/Footer";
import common from "@utils/common";
import api from "@services/";
const columns = [
	{
		title: "Address",
		dataIndex: "address",
		key: "address",
		width: "50%",
		textWrap: "word-break",
		render: (text, record, index) => {
			if (!record.address) return '***';
			return (<span
				onClick={() => {
					copy(record.address);
					message.success("Copied");
				}}
				className="enable-copy-txt-box">
				{record.address}&nbsp;
				<CopyOutlined className="copy-icon" />
			</span>)
		}
	},
	{
		title: "Accounts",
		dataIndex: "account",
		key: "account",
		width: "50%",
		textWrap: "word-break",
		ellipsis: true,
		showType: "addr",
		isSour: true,
		fullLine: true
	}
];

const Main = ({ ...propsS }) => {
	const navigator = useNavigate();
	const [totle, setTotle] = useState(0);
	document.title = "Public Gateway-CESS Scan";
	useEffect(() => {
		common.showAPIUrl();
	}, []);
	const props = {
		border: true,
		size: "middle",
		pagesize: 10,
		loadList: {
			method: api.storage.gateway,
			cb: {
				total: setTotle
			}
		},
		hidePager: true,
		table: {
			columns
		}
	};


	return (
		<div className="containner-in">
			<SearchBar background={"#f4f4f4"} height="100px" />
			<div className="content">
				<div className="list">
					<div>
						<div className="o-title">
							<img style={{ width: 7, height: 12, cursor: "pointer" }} src={process.env.PUBLIC_URL + "/img/goback.svg"} onClick={() => navigator('/storage')} />
							Public Gateway  ({totle.toLocaleString("zh", { style: "decimal" })})
						</div>
						<div className="pc-list">
							<ThTable props={props} />
						</div>
						<div className="mobile-list">
							<MList props={props} />
						</div>
					</div>
				</div>
			</div>
			<Footer />
		</div>
	);
};

function isEqual(prevProps, nextProps) {
	return _.isEqual(prevProps.data, nextProps.data);
}

export default React.memo(Main, isEqual);
